<template>
  <div id="container">
    <vue-particles
      color="#ffffff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="2"
      linesColor="#ffffff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="100"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    ></vue-particles>
    <div id="decoration">
      <dv-decoration-9 style="width:100%;height:100%;"></dv-decoration-9>
      <dv-decoration-12 style="position: absolute;width:70%;height:70%;left: 15%; top: 15%;" />
    </div>
    <div id="box">
      <div id="title">
        <p>智慧工厂后台管理平台</p>
        <p class="small">Intelligent factory background management platform</p>
      </div>
      <div id="body">
        <dv-border-box-12>
          <div id="center">
            <p class="title">用户登录</p>
            <p>
              <i class="el-icon-user"></i>
              <input ref="username" type="text" v-model="LoginForm.username" />
            </p>
            <p>
              <i class="el-icon-lock"></i>
              <input ref="password" type="password" v-model="LoginForm.password" />
            </p>
            <p>
              <button @click="Submit" :loading="loading">登录</button>
            </p>
          </div>
        </dv-border-box-12>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      LoginForm: {
        username: "",
        password: "",
      },
      loading: false,
    };
  },
  methods: {
    Submit() {
      if (this.LoginForm.username === "") {
        this.$message.warning("请输入账号");
        this.$refs.username.focus();
      } else if (this.LoginForm.password === "") {
        this.$message.warning("请输入密码");
        this.$refs.password.focus();
      } else {
        this.loading = true;
        this.$store
          .dispatch("user/login", this.LoginForm)
          .then(() => {
            this.$router.push({ path: this.redirect || "/" });
            this.$message({
              message: '登录成功',
              type: 'success',
              center: true
            })
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  outline: none;
}

#container {
  position: fixed;
  width: 100%;
  height: 100%;
  color: #ffffff;
  background-color: #101f54;
}

#decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 15%;
  top: 50%;
  margin-top: -150px;
}

#box {
  position: absolute;
  width: 400px;
  height: 400px;
  right: 15%;
  top: 50%;
  margin-top: -200px;
  text-align: center;

  #title {
    width: 100%;
    height: 50px;
    color: #04a4d2;
    font-size: 24px;
    font-weight: bold;

    .small {
      font-size: 11px;
      font-weight: normal;
    }
  }

  #body {
    position: relative;
    width: 100%;
    height: 350px;
    border-radius: 20px;
    background-color: rgba($color: #ffffff, $alpha: 0.02);

    #center {
      width: 100%;
      height: 100%;
      padding: 60px 10px 0px;

      i {
        margin-right: 2%;
        font-size: 20px;
        color: #0ba6fd;
      }

      .title {
        color: #3372b2;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
      }

      input {
        width: 72%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 20px;
        color: #4f95c4;
        background-color: rgba($color: #ffffff, $alpha: 0.02);
        border: 2px solid #274171;

        &:hover {
          border: 3px solid #4f95c4;
        }
      }

      button {
        width: 78%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 30px;
        background-color: #3a8ee6;
        border: none;
        border-radius: 6px;
        color: #ffffff;

        &:hover {
          background-color: #0ba6fd;
        }
      }
    }
  }
}
</style>